import React, { Component } from 'react';
import { Card, Table, Row, Col, Button, Tooltip, Tabs, Input, Select, Radio, message } from 'antd';
import * as apis from '@/services/ProjectWorkbenchMgr';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './index.less';
import AuthorizedButton from '@/components/AuthorizedButton';
import Mpagination from '../../SystemManage/components/Mpagination';

const { TabPane } = Tabs;
const { Search } = Input;
const { Option } = Select;
export default class index extends Component {
  state = {
    total: '0', // 列表的总条数
    current: '1', // 当前页数
    pageSize: '20', // 每页条数
    pages: '0', // 总页数
    columns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        width: 30,
        align: 'center',
      },
      {
        title: '区域',
        dataIndex: 'regionName',
        key: 'regionName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '城市/项目/分期',
        dataIndex: 'cityProjectStages',
        key: 'cityProjectStages',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待办类型',
        dataIndex: 'todoTypeName',
        key: 'todoTypeName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '待办说明',
        dataIndex: 'content',
        key: 'content',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '责任人',
        dataIndex: 'taskApproveName',
        key: 'taskApproveName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '创建时间',
        dataIndex: 'flowStartDate',
        key: 'flowStartDate',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '处理人',
        dataIndex: 'handlePersonName',
        key: 'handlePersonName',
        width: 70,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '处理时间',
        dataIndex: 'handleTime',
        key: 'handleTime',
        width: 100,
        align: 'center',
        render: text => (
          <Tooltip placement="topLeft" title={text}>
            <div
              style={{
                width: '100%',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
              }}
            >
              {text}
            </div>
          </Tooltip>
        ),
      },
      {
        title: '状态',
        dataIndex: 'todoStatus',
        key: 'todoStatus',
        align: 'center',
        width: 70,
        render: (text, record) => {
          if (text === '0')
            return (
              <Button
                type="link"
                onClick={() =>
                  record.pcTaskUrl
                    ? window.open(record.pcTaskUrl)
                    : message.warning(`跳转路径错误${record.pcTaskUrl}`)
                }
              >
                待处理
              </Button>
            );
          return '已处理';
        },
      },
    ],
    dataSource: [],
    todoTypes: [],
    loading: true,
    typeId: '', // 下拉值
    nameOrCode: '', // 搜索值
    state: '', // 单选值
  };

  componentDidMount() {
    const self = this;
    apis.getTodoTypeUsingGET({ params: {} }).then(result => {
      if (result && result.code === 1) {
        self.setState({
          todoTypes: result.data,
        });
      }
    });
    const { current, pageSize, state } = self.state;
    const params = {
      nameOrCode: '',
      state,
      typeId: '',
      current,
      pageSize,
    };
    self.getRequestTableData(params);
  }

  // 表格数据
  getRequestTableData = params => {
    const self = this;
    self.setState({
      loading: true,
    });
    apis.getSysToDoPageUsingGET({ params }).then(result => {
      if (result && result.code === 1) {
        result.data.list.forEach((item, index) => {
          const x = item;
          x.index = result.data.pageSize * (result.data.current - 1) + index + 1;
        });

        self.setState({
          total: result.data.total,
          current: result.data.current,
          pageSize: result.data.pageSize,
          pages: result.data.pages,
          loading: false,
          dataSource: result.data.list.length > 0 ? result.data.list : [],
        });
      }
    });
  };

  // 搜素框
  handleIptVal = value => {
    const { pageSize, state, typeId } = this.state;
    const params = {
      nameOrCode: value,
      state,
      typeId,
      current: '1',
      pageSize,
    };
    this.getRequestTableData(params);
    this.setState({
      nameOrCode: value,
    });
  };

  // 下拉框
  handleSelectChange = value => {
    const { pageSize, state, nameOrCode } = this.state;
    const params = {
      nameOrCode,
      state,
      typeId: value,
      current: '1',
      pageSize,
    };
    this.getRequestTableData(params);
    this.setState({
      typeId: value,
    });
  };

  // 单选按钮
  handleTodoStatusKeyChange = e => {
    this.setState({
      state: e.target.value,
    });
    const { pageSize, typeId, nameOrCode } = this.state;
    const params = {
      nameOrCode,
      state: e.target.value,
      typeId,
      current: '1',
      pageSize,
    };
    this.getRequestTableData(params);
  };

  handlePaginationChange = (current, pageSize) => {
    const { state, typeId, nameOrCode } = this.state;
    const params = {
      nameOrCode,
      state,
      typeId,
      current,
      pageSize,
    };
    this.getRequestTableData(params);
  };

  render() {
    const { todoTypes, state, loading } = this.state;
    return (
      <div className={styles.SystemToDoListRemind}>
        <PageHeaderWrapper breadcrumb={null} title="全部待办提醒">
          <Card>
            <Tabs
              tabBarExtraContent={
                <Row type="flex" align="middle" gutter={[20, 0]}>
                  <Col>
                    <Search
                      placeholder="请输入项目名称或项目编码"
                      onSearch={this.handleIptVal}
                      style={{ width: 200 }}
                    />
                  </Col>
                  <Col>
                    <Select
                      placeholder="--待办类型筛选--"
                      style={{ width: 135 }}
                      onChange={this.handleSelectChange}
                    >
                      {todoTypes.map(element => (
                        <Option key={element.code}>{element.name}</Option>
                      ))}
                    </Select>
                  </Col>
                  <Col>
                    <Radio.Group onChange={this.handleTodoStatusKeyChange} value={state}>
                      <Radio value="">全部</Radio>
                      <Radio value={0}>待处理</Radio>
                      <Radio value={1}>已处理</Radio>
                    </Radio.Group>
                  </Col>
                </Row>
              }
            >
              <TabPane tab="待办提醒" key="1">
                <div className="crar-content">
                  <Table
                    rowKey="index"
                    columns={this.state.columns}
                    bordered
                    size="middle"
                    dataSource={this.state.dataSource}
                    loading={loading}
                    pagination={false}
                    scroll={{ y: document.body.clientHeight - 252 }}
                  />
                  <Mpagination
                    total={this.state.total}
                    pageSize={this.state.pageSize}
                    current={this.state.current}
                    pages={this.state.pages}
                    onShowSizeChange={(c, p) => this.handlePaginationChange(c, p)}
                    handlePaginationChange={this.handlePaginationChange}
                  />
                </div>
              </TabPane>
            </Tabs>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}
